<template>
	<!-- 预存卡管理 -->
	<view class="wp">
<!-- style="background-image:url(/static/user/mem/leiji.png)" -->
		<view class="p_head">
<!-- 			<image  class="bg" src="/static/user/mem/leiji.png" ></image> -->
			<view class="title">多米街用户可用消费额</view>
			<view class="money">{{info.info.usemoney}}元</view>
			<!-- <view class="record" @click="$navTo('../business/collectionrecord')">查看明细></view> -->
			<view class="refund">
				<text>当前折扣 {{info.info.discount}}折</text>
				<text>余额可退现金 {{info.info.price}}元</text>
			</view>
		</view>
		<view class="p_body">
			<view class="list_item">
				<view class="title">
					<text class="name">说明</text>
				</view>
					<view class="">
						<view>【可用消费余额】仅用于多米街用户到店消费，用户在平台原价消费，会自动扣除消费额，该余额与本店【团购商品】无任何关系。当余额不足时，平台会找您继续充值。</view>
					</view>
			</view>
			<view class="p_buttons">
				<button size="mini" type="warn" @click="openCash">闭店退款</button>
				<button size="mini" type="primary" @click="openRecharge">充值记录</button>
				<button size="mini" type="default" style="background: #8405dc;color:#fff" @click="$navTo('../business/collectionrecord')">查看明细</button>
			</view>
			<view class="list_item" v-if="isShowRecharge">
				<view class="title">
					<text class="name">充值/退款</text>
					<text class="color_1" @click="$navTo('../user/czshop')">查看记录></text>
				</view>
				<view class="list_li">
					<view class="left">
						<text>【充值申请】{{info.num}}笔</text>
					</view>
				</view>
				<view class="list_li">
					<view class="left">
						<text>【累计收到现金】{{info.usemoney}}元</text>
					</view>
				</view>
				<view class="list_li">
					<view class="left">
						<text>【累计充值额度】{{info.allmoney}}元</text>
					</view>
				</view>
			</view>

			<view class="list_item" v-if="!Array.isArray(czInfo)">
				<view class="title">
					<text class="name">充值申请</text>
					<text class="time color_w">申请时间{{czInfo.createtime}}</text>
				</view>
				<view class="list_li">
					<view class="left">
						<text>收到预存现金</text>
						<text class="color_1" @click="preImage(czInfo.thumb)">查看凭证</text>
					</view>
					<view>{{czInfo.money}}元</view>
				</view>
				<view class="list_li">
					<view class="left">
						<text>赠送额度</text>
					</view>
					<view>{{czInfo.givemoney}}元</view>
				</view>
				<view class="list_li">
					<view class="left">
						<text>实际折扣</text>
					</view>
					<view>{{czInfo.discount}}折</view>
				</view>
				<view class="left">
				<text style="font-size: 24upx;color: #888;">实际折扣=预存现金÷(预存现金+赠送额度)</text>
				</view>
				<view class="list_li">
					<view class="left">
						<text>充值额度</text>
					</view>
					<view class="color_2">+{{czInfo.usemoney}}元</view>
				</view>
				<view class="warn">
					【风险提示】请确认收到本地代理商预存款，点击[确认充值]后，充值额度(含赠送额度)将存入[共享会员卡余额]。
				</view>
				<view class="buttons">
					<button class="button_1" size="mini" @click="submitCZ(-1)">驳回申请</button>
					<button class="button_2" size="mini" @click="submitCZ(1)">确认充值</button>
				</view>
			</view>

			<view class="list_item" v-if="isShowCash">
				<view class="title">
					<text class="name">退回现金(按余额消耗比例推给充值人)</text>
				</view>

				<view class="list_li">
					<view class="left">
						<text>本次预存折扣</text>
					</view>
					<view class="color_2">{{TKinfo.discount}}折</view>
				</view>
				<view class="list_li">
					<view class="left">
						<text >当前会员卡余额</text>
					</view>
					<view class="color_2">{{TKinfo.usemoney}}元</view>
				</view>
				<view class="list_li">
					<view class="left">
						<text>卡内余额现金价值</text>
					</view>
					<!-- <view class="input">
						<uni-easyinput type="number" v-model="money" :clearable="false" :inputBorder="false"
							placeholder="填写退还金额" />元
					</view> -->
					<view class="color_2">-{{TKinfo.money}}元</view>
				</view>
				<view class="list_li">
					<view class="left">
						<text>上传退回现金凭证</text>
					</view>
					<view class="color_3" @click="uploadImage">上传图片</view>
				</view>
				<view class="list_li1" v-if="thumb">
					<image :src="thumb" ></image>
				</view>
				<view class="warn">
					<view>【退款说明】</view>
					<view>1、当平台新增预存款时，新增预存折扣与当前预存折扣一致时，商家不用进行退款操作。</view>
					<view>2、当平台新增预存款时，新增预存折扣与当前预存折扣不一致时，商家必须进行退款操作。将预存卡额度清零后，等待平台确认后，代理商才可新增预存折扣。</view>
				</view>
				<view class="buttons">
					<button class="button_1" size="mini" @click="tuiKuanTap">我已退回现金，清除预存卡余额</button>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(["url"])
		},
		data() {
			return {
				info: {
					allmoney: 0,
					info: {
						discount: "",
						price: 0,
						usemoney: "",
					},
					num: 0,
					usemoney: 0,
				},
				czInfo: [],
				TKinfo: {
					discount: "",
					money: 0,
					usemoney: "",
				},
				thumb: '',
				isShowCash: false,
				isShowRecharge: false,
			}
		},
		onLoad() {
			this.getInfo();
			this.getczInfo();
			this.getTKInfo();
		},
		methods: {
			openCash(){
				this.isShowCash = true;
			},
			openRecharge(){
				this.isShowRecharge = true;
			},
			getInfo() {
				this.$axios('money/checkInfo', 'POST', 'member').then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
					}
				})
			},
			getczInfo() {
				this.$axios('money/czCheckInfo', 'POST', 'member').then(res => {
					if (res.data.code == 200) {
						this.czInfo = res.data.data;
					}
				})
			},
			getTKInfo() {
				this.$axios('money/tkCheckInfo', 'POST', 'member').then(res => {
					if (res.data.code == 200) {
						this.TKinfo = res.data.data;
					}
				})
			},
			submitCZ(v) {
				this.$axios('money/czCheck', 'POST', 'member', {
					check: v,
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: '操作成功！'
						})
						setTimeout(() => {
							this.$navRed('../user/prestore');
						}, 700)
					}
				})
			},
			tuiKuanTap() {
				// let that = this;
				if (!this.thumb) {
					this.$api.msg('请上传凭证！');
					return;
				}
				uni.showModal({
					title: '提示',
					content: '是否确认清除卡内余额？',
					cancelText: '否',
					confirmText: '是',
					success: res=> {
						if (res.confirm) {
							this.$axios('money/tkCheck', 'POST', 'member', {
								thumb: this.thumb
							}).then(res => {
								if (res.data.code == 200) {
									uni.showToast({
										title: '操作成功！'
									})
									setTimeout(() => {
										this.$navRed('../user/prestore');
									}, 700)
								}
							})
						}
					}
				});
				
			},
			uploadImage() {
				let that = this;
				uni.chooseImage({
					sizeType: 'original',
					success(chooseImage) {
						uni.showLoading({
							title: '上传中',
							mask: true
						});
						let token = uni.getStorageSync('token');
						uni.uploadFile({
							url: that.url.upload,
							filePath: chooseImage.tempFilePaths[0],
							name: 'a',
							header: {
								token: token
							},
							formData: {
								'file': 'a'
							},
							success(res) {
								let data = JSON.parse(res.data);
								if (data.code == 200) {
									that.thumb = data.data.url;
									uni.showToast({
										title: '上传成功',
									})
								} else {
									uni.showToast({
										title: '上传失败请重试',
										icon: 'none'
									})
								}
							},
							fail() {
								uni.showToast({
									title: '上传失败请重试',
									icon: 'none'
								})
							},
							complete() {
								uni.hideLoading();
							}
						})
					}
				})
			},
			preImage(v) {
				let that = this;
				uni.previewImage({
					urls: [v],
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
	}

	.wp {
		letter-spacing: 1px;
	}


	.p_head {
		background: repeating-linear-gradient(45deg,#000000 0,#000000 4px,#0d0d0d 0,#0d0d0d 8px);
		color: #f3dd91;
		font-size: 26upx;
		font-weight: bold;
		letter-spacing: 2px;
		padding: 20upx;
		
		.title {
			font-size: 48upx;
			text-align: center;
		}
		.money {
			font-size: 48upx;
			padding-top: 18upx;
			text-align: center;
		}
		.record {
			font-size: 30upx;
			padding: 4upx 0 18upx 0;
			text-align: center;
			// left: 5upx;
		}
		.refund {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
	.p_buttons{
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
		button{
			margin: 0;
		}
	}
	.p_body {
		padding: 0 20upx 100upx;
		overflow: hidden;

		.list_item {
			background: #fff;
			border-radius: 20upx;
			color: #303133;
			margin-top: 30upx;
			padding: 20upx;

			.title {
				border-bottom: 1px #DCDFE6 solid;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 30upx;
				font-weight: bold;
				margin-bottom: 20upx;
				padding-bottom: 20upx;

				.name {
					font-size: 32upx;
					color: #000;
				}

				.time {
					color: #666;
					font-size: 26upx;
					font-weight: normal;
				}
			}

			.list_li,
			.left,
			.list_li1 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				line-height: 55upx;

				.left {
					justify-content: flex-start;
					color: #303133;

					text:nth-of-type(2) {
						margin-left: 20upx;
					}
				}
			}

			.list_li1 {
				justify-content: flex-start;
				flex-wrap: wrap;

				image {
					border-radius: 15upx;
					height: 120upx;
					margin: 20upx 20upx 20upx 0;
					width: 120upx;
				}
			}

			.color_w {
				color: #303133;
			}

			.color_1 {
				color: #927419;
			}

			.color_2 {
				color: $bg-color;
				font-weight: bold;
			}

			.color_3 {
				color: rgb(49, 12, 187);
				font: bold;
			}

			.warn {
				border-top: 1px #DCDFE6 solid;
				color: #444;
				font-size: 26upx;
				line-height: 45upx;
				margin: 20upx 0;
			}

			.buttons {
				display: flex;
				align-items: center;
				justify-content: space-evenly;

				.button_1 {
					background: rgb(151, 1, 1);
					color: #fff;
				}

				.button_2 {
					background: rgb(9, 72, 1);
					color: #fff;
				}
			}
		}
	}

	.input {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.uni-easyinput .uni-easyinput__content-input {
		text-align: right;
		padding-right: 0 !important;
	}
</style>